// 文件路径：src/components/InputTags.js

import React, { useState, useRef } from 'react';
import { TextField, Box } from '@mui/material';

export default function InputTags() {
  const [tags, setTags] = useState([]);
  const tagRef = useRef();

  const handleOnSubmit = (e) => {
    e.preventDefault();
    setTags([...tags, tagRef.current.value]);
    tagRef.current.value = '';
  };

  return (
    <Box sx={{ flexGrow: 1 }}>
      <form onSubmit={handleOnSubmit}>
        <TextField
          inputRef={tagRef}
          fullWidth
          variant="standard"
          size="small"
          margin="none"
          placeholder={tags.length < 5 ? 'Enter tags' : ''}
          InputProps={{
            startAdornment: (
              <Box sx={{ margin: '0 0.2rem 0 0', display: 'flex' }}>
                {tags.map((data, index) => (
                  <span key={index}>{data}</span>
                ))}
              </Box>
            )
          }}
        />
      </form>
    </Box>
  );
}
